<template>
  <div class="footer">
    <van-icon
      name="like"
      size="45"
      :color="iconColor"
      @click="clickHandler(book.id)"
    />
    <button class="btn2" @click="goReadHandler">开始阅读</button>
  </div>
</template>

<script>
import { Notify } from 'vant';
import {
  addLikeApi,
  delLikeApi,
} from "@/api/selectLikeApi";
import router from '@/router';
export default {
  props: {
    book: {},
  },
  data() {
    return {
      iconColor: "#ccc",
      like: false,
    };
  },
  //创建之前查看是否已经收藏 
  created() {
    this.like = this.book.like;
    if (this.like) this.iconColor = "red";
  },
  methods: {
    goReadHandler(){
      this.$router.push(`/bookStore/${this.book.id}/pages/content`);
      
    },
    //判断是否为已经 收藏 执行相应的内容
    async clickHandler(id) {
      if (this.like) {
        //取消收藏
        const res = await delLikeApi(id);
        Notify({ type: 'success', message: '取消成功' });
        if (res) this.like = false;
        //假功能
        this.iconColor = "#ccc";
      } else {
        //添加收藏
        const ret = await addLikeApi(id);
        Notify({ type: 'success', message: '添加成功' });
        if (ret) this.like = true;
      }
    },
  },
  //进行数据监视,like值修改以后 动态的改变颜色的值
  watch: {
    like: function (newValue, oldValue) {
      this.iconColor = this.like ? "red" : "#ccc";
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  width: 375px;
  height: 70px;
  position: fixed;
  align-items: center;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  button {
    width: 120px;
    height: 60px;
  }
  .btn2 {
    width: 100px;
    height: 50px;
  }
}
</style>